<template>
    <div>
        <navbar>
            <div id="nav-upload">商品上传</div>
        </navbar>
        <div id="upload-msg">
            <form action="">
            <label for="">大分类</label>
            <input type="text" v-model="bigtype">
            <br>
            <label for="">小分类</label>
            <input type="text" v-model="smalltype">
            <br>
            <label for="">商品名称</label>
            <input type="text" v-model="goodsname">
            <br>
            <label for="">商品价格</label>
            <input type="number" v-model="goodsprice">
            <br>
            <label for="">商品数量</label>
            <input type="number" v-model="goodsnumber">
            <br>
            <label for="">原产地</label>
            <input type="text" v-model="goodsarea">
            <div>
                <p>商品图片</p>
                <div id="img-list" ref="file">
                    <label for="file-selector" id="file-label" ref="filelabel">+</label>
                    <input id="file-selector" type="file" accept="image/jpeg,image/png,image/gif" @change="chooseImage" multiple>
                </div>
            </div>
            </form>
        </div>
        <button @touchstart="goodsupload">提交</button>
    </div>
</template>

<script>
import navbar from "../components/navbar"
export default {
    components: {
        navbar
    },
    data () {
        return {
            goodsname:"",
            goodsprice:"",
            goodsnumber:"",
            goodsarea:"",
            files:[],
            bigtype:[],
            smalltype:""
        }
    },
    methods: {
        chooseImage: function(e) {
            for (var i = 0; i < e.target.files.length; i++) {
                var f = e.target.files[i];
                this.files.push(f);
                var img = document.createElement("img");
                img.style.width = "28vw";
                img.style.marginRight = "6px";

                var url = URL.createObjectURL(f);
                img.src = url;
                this.$refs.file.insertBefore(img, this.$refs.filelabel);
            }
        },
        goodsupload:function(){
            var data = new FormData();
            data.append("goodsname",this.goodsname);
            data.append("goodsprice",this.goodsprice);
            data.append("goodsnumber",this.goodsnumber);
            data.append("goodsarea",this.goodsarea);
            data.append("bigtype",this.bigtype);
            data.append("smalltype",this.smalltype);
            for(var i = 0;i<this.files.length;i++){
                data.append("image",this.files[i]);
            }
            this.http.post("/api/goods/upload",data,{
                headers: { "Content-Type": "multipart/form-data" }
            }).then(res=>{
                // console.log(res.data.msg);
            })
        }
    }
}
</script>

<style scoped>
#nav-upload {
    position: absolute;
    margin-left: 42vw;
    line-height: 37px;
}

#upload-msg {
    margin-top: 44px;
}
#file-label {
    width: 28vw;
    height: 28vw;
    border: solid 1px black;
    display: inline-block;
    font-size: 80px;
    text-align: center;
    line-height: 100px;
    vertical-align: top;
}
#file-selector {
    display: none;
}
</style>